<template>
    <div class="role">
        <div class="search-from flex justify-between">
            <el-form :inline="true" :model="searchFrom">
                <el-form-item label="角色名称：">
                    <el-input v-model="searchFrom.name" placeholder="请输入角色名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="search">查询</el-button>
                    <el-button v-has="234" type="success" @click="handle('add')">新增</el-button>
                </el-form-item>
            </el-form>
        </div>


        <!-- 表格 -->
        <div class="table-list">
            <el-table
                    ref="table"
                    :data="tableData"
                    stripe
                    border
                    tooltip-effect="dark"
                    style="width: 100%">
                <el-table-column label="序号" width="60">
                    <template slot-scope="scope">
                        <span>{{ searchFrom.pageSize * (searchFrom.pageIndex - 1)  + 1 + scope.$index }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="角色名称"
                        prop="name">
                </el-table-column>
                <el-table-column
                        prop="id"
                        label="编码">
                </el-table-column>
                <el-table-column
                        prop="desc"
                        label="描述">
                </el-table-column>
                <el-table-column
                        prop="valid"
                        label="状态">
                    <template slot-scope="scope">
                        <el-switch
                                v-model="scope.row.valid >0"
                                active-color="#13ce66"
                                inactive-color="#ff4949"
                                @change="changeState($event,scope.row)">
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="120">
                    <template slot-scope="scope">
                        <el-button v-has="234" type="text" @click="handle('edit', scope.row)">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <div class="margin-t-10 margin-b-10 text-center">
                <el-pagination
                        @current-change="changePage"
                        :current-page.sync="searchFrom.pageIndex"
                        :page-size="searchFrom.pageSize"
                        layout="prev, pager, next, jumper"
                        prev-text="上一页"
                        next-text="下一页"
                        :total="total">
                </el-pagination>
            </div>
        </div>
        <!-- 新增、编辑、查看-->
        <addRole
                v-if="dialogParams.visible"
                :dialogParams="dialogParams"
                @getList="getList"></addRole>
    </div>
</template>

<script>
    import {getRoleList, editRole} from "../../api/systemManage";
    import addRole from './modules/addRole';

    export default {
        name: 'role',
        components: {
            addRole
        },
        data () {
            return {
                searchFrom: {
                    name: '',
                    pageSize: 10,
                    pageIndex: 1
                },
                // 表格参数
                total: 0,
                tableData: [],
                // 新增、编辑、查询相关参数
                dialogParams: {
                    visible: false,
                    id: '',
                    title: '',
                    type: ''
                }
            }
        },
        created () {
            this.getList()
        },
        methods: {
            // 查询列表数据
            getList () {
                getRoleList(this.searchFrom).then(res => {
                    this.tableData = res.dataList || [];
                    this.total = res.total || 0;
                }).catch()
            },
            // 查询
            search () {
                this.searchFrom.pageIndex = 1;
                this.getList();
            },
            // 切换页码
            changePage(val) {
                this.searchFrom.pageIndex = val;
                this.getList()
            },
            // 操作
            handle (type, row) {
                switch (type) {
                    case 'add':
                        this.dialogParams = {
                            visible: true,
                            title: '新增角色',
                            type: type
                        };
                        break;
                    case 'edit':
                        this.dialogParams = {
                            visible: true,
                            title: '编辑角色',
                            type: type,
                            id: row.id
                        };
                        break;
                    case 'detail':
                        this.dialogParams = {
                            visible: true,
                            title: '查看角色信息',
                            type: type,
                            id: row.id
                        };
                        break;
                    case 'del':
                        // this.$confirm('您确定要删除该数据吗?', '删除', {
                        //     confirmButtonText: '确定',
                        //     cancelButtonText: '取消',
                        //     type: 'warning'
                        // }).then(() => {
                        //     delData(row.id).then(res => {
                        //         this.$message.success('操作成功');
                        //         this.getList();
                        //     }).catch()
                        // }).catch();
                }
            },
            // 修改角色状态
            changeState(event, row) {
                let params = {
                    id: row.id,
                    name: row.name,
                    desc: row.desc,
                    valid: event ? 1 : 0
                }
                editRole(row.id, params).then(res => {
                    this.$message.success('操作成功');
                    this.getList();
                }).catch()
            }
        }
    }
</script>

<style scoped>

</style>